<template>
	<div class="container">
		<div class="tl">
			<span :span="4">已接入存储设备数：{{ deviceData.device_count }}</span>
			<span :span="4" style="text-indent: 20px;display: inline-block;">已划分存储域数：{{ deviceData.domin_count }}</span>
		</div>

		<el-row type="flex" class="row_b1 chart" :style="{height: scrollerHeight}">
			<el-col :span="12" class="item chart_l">
				<div id="c1"></div>
			</el-col>
			<el-col :span="12" class="item">
				<div id="c2"></div>
			</el-col>
		</el-row>

		<el-row type="flex" class="row_b chart" :style="{height: scrollerHeight}">
			<el-col :span="12" class="item chart_l">
				<div id="c3"></div>
			</el-col>
			<el-col :span="12" class="item">
				<div id="c4"></div>
			</el-col>
		</el-row>
	</div>
</template>

<script>
import { getDeviceDomin, getDeviceUsage, getDomainUsage, getOrgUsage, getOrgDepartUsage } from '@/api/admin'
import { Pie, Column, Bar, Ring, StackColumn } from '@antv/g2plot'
import { clone } from '@/utils/base.js'
export default {
	name: 'dashboard',
	components: {},
	data () {
		return {
			org_code: null,
			deviceData: {
				device_count: null,
				domain_count: null,
			},
			waterVal: 5639,
			waterTotalVal: 10000,
			ringData: []
		}
	},
	computed: {
		scrollerHeight () {
			return `${ ( window.innerHeight - 165 ) / 2 }px`
		},
	},
	created () {
		this.org_code = this.$route.params.org_code
	},
	mounted () {
		this.getDomainUsage()
		this.getDeviceDomin()
		this.getDeviceUsage()
		this.getOrgUsage()
		this.getOrgDepartUsage()
	},
	methods: {
		getDeviceDomin () {
			// 获取存储设备使用容量统计信息（行政监管）
			getDeviceDomin().then( res => {
				if ( res.code === 0 ) {
					this.deviceData = res.data
				}
			} )
		},
		getDomainUsage () {
			// 查询存储量
			getDomainUsage().then( res => {
				if ( res.code === 0 ) {
					console.log( res.data );
					this.getRingChart( res.data )
				}
			} )
		},
		getOrgUsage () {
			// 获取机构存储量统计信息（行政监管)
			getOrgUsage().then( res => {
				if ( res.code === 0 ) {
					this.getColumnChart( this.initArrayNumber( res.data, 'used_size' ) )
				}
			} )
		},
		getOrgDepartUsage () {
			// 获取科室存储量统计信息（行政监管）(机构管理))",
			getOrgDepartUsage().then( res => {
				if ( res.code === 0 ) {
					this.getBarChart( this.initArrayNumber( res.data, 'used_size' ) )
				}
			} )
		},
		getDeviceUsage () {
			console.log( '堆积图' );
			getDeviceUsage().then( res => {
				if ( res.code === 0 ) {
					let tempData = [],
						tempData2 = [],
						chartData = []

					tempData = clone( res.data )
					tempData2 = clone( res.data )
					//  未使用
					tempData.map( ele => {
						ele.size = Math.round( ele.device_size - ele.used_size, 2 )
						ele.type = '未使用'
						return ele
					} )
					// 已使用
					tempData2.map( ele => {
						ele.size = Math.round( ele.used_size, 2 )
						ele.type = '已使用'
						return ele
					} )
					chartData = [ ...tempData, ...tempData2, ]
					console.log( chartData );
					this.getStackBar( chartData )
				}
			} )
		},
		getRingChart ( chartData ) {
			// 环形图
			const ringPlot = new Ring( document.getElementById( 'c1' ), {
				forceFit: true,
				radius: 0.9,
				innerRadius: 0.53,
				title: {
					visible: true,
					text: '各存储域使用容量',
				},
				data: chartData,
				angleField: 'used_size',
				colorField: 'domain_name',
				description: {
					visible: true,
					text: '单位:TB',
				},
				legend: {
					visible: true,
					position: 'top-left',
					flipPage: true,
					offestY: 30,
				},
				label: {
					visible: true,
					type: 'spider',
				},
			} )

			ringPlot.render()
		},

		getColumnChart ( chartData ) {
			// 条形统计图
			const columnPlot = new Column( document.getElementById( 'c3' ), {
				title: {
					visible: true,
					text: '各医疗机构存储容量使用',
				},
				description: {
					visible: true,
					text: '单位:TB',
				},
				forceFit: true,
				padding: 'auto',
				data: chartData,
				xField: 'org_name',
				yField: 'used_size',
				meta: {
					org_name: { alias: '类别' },
					used_size: { alias: '存储量' },
				},
				label: {
					visible: true,
					style: {
						fill: '#333333',
						fontSize: 14,
						fontWeight: 500,
						opacity: 1,
					},
				},
				columnSize: 40,
				color: [ '#1C8BE4' ],
				// todo
				xAxis: {
					visible: true,
					grid: { visible: false },
					title: { visible: false },
					line: {
						visible: 'true',
						style: {
							stroke: '#ddd',
							lineDash: [ 0, 0 ],
						},
					},
				},
				yAxis: {
					formatter: v => Math.round( v / 1024 ),
					visible: true,
					title: { visible: false },
					grid: {
						visible: true,
						style: {
							stroke: '#ddd',
							lineDash: [ 0, 0 ],
						},
					},
					line: {
						visible: true,
						style: {
							stroke: '#ddd',
							lineWidth: 1,
						},
					},
					tickLine: {
						visible: true,
						style: {
							stroke: '#ddd',
							lineWidth: 1,
						},
					},
					label: {
						visible: true,
						style: { fill: '#999' },
					},
				},

        /*
         * style: {
         *   fontSize: 16,
         *   fill: '#333'
         * }
         */
			} )

			columnPlot.render()
		},
		getBarChart ( data ) {
			// 条形图
			const barPlot = new Bar( document.getElementById( 'c4' ), {
				title: {
					visible: true,
					text: '各科室存储容量使用',
				},
				description: {
					visible: true,
					text: '单位:TB',
				},
				meta: {
					depart_name: { alias: '科室' },
					used_size: { alias: '使用量' },
				},
				forceFit: true,
				data: data,
				xField: 'used_size',
				yField: 'depart_name',
				columnSize: 40,
				color: [ '#1C8BE4' ],
				// eslint-disable-next-line no-dupe-keys
				label: {
					visible: true,
					position: 'right',
					adjustColor: false,
					style: {
						fill: '#333333',
						fontSize: 18,
						fontWeight: 500,
						opacity: 1,
					},
				},
				xAxis: {
					formatter: v => `${ Math.round( v / 1024 ) }`,
					visible: true,
					grid: { visible: true },
					title: { visible: false },
					line: {
						visible: 'true',
						style: {
							stroke: '#ddd',
							lineDash: [ 0, 0 ],
						},
					},
				},
				yAxis: {
					visible: true,
					title: { visible: false },
					grid: {
						visible: false,
						style: {
							stroke: '#ddd',
							lineDash: [ 0, 0 ],
						},
					},
					line: {
						visible: true,
						style: { stroke: '#ddd' },
					},
					label: { style: { color: '#333333' } },

					tickLine: {
						visible: true,
						style: { stroke: '#ddd' },
					},
					label: {
						visible: true,
						style: { fill: '#999' },
					},
				},
			} )

			barPlot.render()
		},
		getStackBar ( chartData ) {
			// 堆积图
			const columnPlot = new StackColumn( document.getElementById( 'c2' ), {
				title: {
					visible: true,
					text: '存储设备容量使用',
				},
				forceFit: true,
				data: chartData,
				padding: 'auto',
				xField: 'device_name',
				yField: 'size',
				yAxis: {
					visible: true,
					title: { visible: false },
					grid: {
						visible: true,
						style: {
							stroke: '#ddd',
							lineWidth: 50,
							lineDash: [ 0, 0 ],
						},
					},
					line: {
						visible: true,
						style: {
							stroke: '#ddd',
							lineWidth: 1,
						},
					},
					tickLine: {
						visible: true,
						style: {
							stroke: '#ddd',
							lineWidth: 1,
						},
					},
					label: {
						visible: true,
						style: { fill: '#999' },
					},
				},
				xAxis: {
					visible: true,
					title: { visible: false },
					grid: {
						visible: false,
						style: {
							stroke: '#ddd',
							lineWidth: 50,
							lineDash: [ 0, 0 ],
						},
					},
					line: {
						visible: true,
						style: {
							stroke: '#ddd',
							lineWidth: 1,
						},
					},
					label: {
						visible: true,
						style: { fill: '#999' },
					},
				},
				color: [ '#ddd', '#1C8BE4' ],
				stackField: 'type',
				columnSize: 40,
				description: {
					visible: true,
					text: '单位:TB',
				},
				legend: {
					visible: true,
					position: 'top-left',
					flipPage: true,
					offestY: 30,
				},
				style: {
					fontSize: 16,
					fill: '#333',
				},
			} )

			columnPlot.render()
		},
	},
}
</script>

<style scoped lang="less">
.container {
	background-color: #f7f7f7;
	.tl {
		// margin-left: 20px;
		color: #0a70b0;
		background-color: #fff;
		padding-bottom: 20px;
		text-indent: 20px;
	}
	.item {
		height: 440px;
		line-height: 440px;
		border: 1px solid #ffffff;
		background-color: #fff;
	}
	.row_b1 {
		margin-bottom: 10px;
	}
	.chart {
		margin-top: 10px;
		width: 100%;
		// height: 500px;
		div {
			height: 100%;
		}
		.item {
			text-align: center;
		}
	}
	.chart_l {
		margin-right: 10px;
	}
	.water_title {
		position: absolute;
		left: 100px;
		bottom: 42%;
		left: 45%;
	}
}
</style>
